/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-09-20 10:21:39
 */
import React, { useRef, useState, useEffect } from "react";
import styled from "styled-components";
import {
    DatePicker,
    Input,
    InputNumber,
    Menu,
    Modal,
    Button,
    Tooltip,
    Dropdown,
    Descriptions,
    Select,
    Space,
    Table,
    message,
    Tabs,
    Popconfirm,
    Checkbox,
    Card,
    Form,
    Collapse,
    Empty
} from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, formatterSize, formatterSizeFromMB } from "@utils/format";
import copy from "copy-to-clipboard";
import { NavLink, Outlet, useParams } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import { isMobile } from "@utils";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import Footer from "@/components/Footer";
import common from "@utils/common";
import api from "@services/";

const columns = [
	{
		title: "Rank",
		dataIndex: "rank_number",
		key: "rank_number",
		width: "5%",
		textWrap: "word-break",
	},
	{
		title: "Accounts",
		dataIndex: "signature_acc",
		key: "signature_acc",
		width: "26%",
		textWrap: "word-break",
		showType: "copyLong-link",
		link: '/account/{signature_acc}'
	},
	{
		title: "Staking",
		dataIndex: "collaterals",
		key: "collaterals",
		width: "10%",
		textWrap: "word-break",
		showType: "balance-logo"
	},
	{
		title: "Power",
		dataIndex: "power",
		key: "power",
		width: "10%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "power"
	},
	{
		title: "Power Ratio",
		dataIndex: "power_ratio",
		key: "power_ratio",
		width: "10%",
		textWrap: "word-break",
		render:(txt,record)=>{
			return parseFloat((parseFloat(txt)*100).toFixed(3))+'%'
		}
	},
	{
		title: "Reward",
		dataIndex: "total_reward",
		key: "total_reward",
		width: "10%",
		showType: "balance-logo"
	},
	{
		title: "Status",
		dataIndex: "state",
		key: "state",
		width: "10%"
	}
];

const Main = ({ ...propsS }) => {
    const { q } = useParams();
    const navigator = useNavigate();
    const [totle, setTotle] = useState(0);
    document.title = "Signature Accounts";


    const props = {
        border: true,
        size: "middle",
        pagesize: 10,
        cacheKey:"signaturer-list",
        loadList: {
            method: api.sminer.revenues,
            params: {
                accountId: q
            },
            cb: {
                total: setTotle
            }
        },
        table: {
            columns,
        }
    };
    useEffect(() => {
		common.showAPIUrl();
	}, []);

    return (
        <div className="containner-in">
            <SearchBar background={"#f4f4f4"} height="100px" />

            <div className="content">
                <div className="top-title" style={{margin:"30px 0"}}>
                    <span onClick={() => navigator(-1)} className="link">
                        <img src="/img/left.svg" width={7} />
                        &nbsp;&nbsp;
                    </span>
                    <label>Signature Accounts ({totle})</label>
                </div>
                <div className="list">
                    <div className="pc-list">
                        <ThTable props={props} />
                    </div>
                    <div className="mobile-list">
                        <Card
                            title={
                                <span>
                                    <img width={19} src={process.env.PUBLIC_URL + "/img/icon_jh.png"} /> Signature Accounts
                                </span>
                            }
                            className="myRadius">
                            <MList props={props} />
                        </Card>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
};

export default styled(Main)`
	display: block;
	overflow: hidden;
	
`;

